The BMP file

The .bmp file contains all the graphics needed in your skin.
You can use any bitmap editor (from Paint to Photoshop) to modify or create it.
The bitmap will usually have a width of 1024, and a height of more than 768.
In the first 768 rows you'll find the background used for your skin.
The next rows are used to store additional graphics, like pushed or selected buttons.

The XML file

The .xml file describes each element of your skin.
For each element, it defines what it should be used for, where are the graphics used for its various states (in coordinates from the .bmp file), and various other things.
The xml file can be edited from a simple text editor (like notepad), but it's more likely that you will install a specific xml editor (by the way, by default, Windows will open a .xml file in internet explorer where you can read it but can't modify it).

The xml file is composed of a root element (Skin), which contains all the elements of your skin.
There are 10 different types of elements:

The Actions

Here is the list of the valid actions:

• nothing : Useful to make a zone react to the mouse (with over for example) with no action
• close : Close the software and return to Windows
• minimize : Minimize the software to the taskbar
• maximize : Switch to or from the fullscreen mode
• play : Play the song on desk "chan"
• play_n_loop : Start a loop on the first beats of the song (or exit the loop the second time).
• pause : Pause the song on desk "chan"
• stop : Stop the song on desk "chan"
• sync : play and synchronize the song on desk "chan"
• play_pause : Play the song on desk "chan" if it's paused, or pause it if it's playing
• cue_stop : Cue the song on desk "chan" if it's paused, or stop it if it's playing
• beatlock : Engage or disable the BeatLock
• mix : Start an auto-mix
• select : Set the desk "chan" as the active desk
• master_volume : Set the windows' soundcard volume
• headphone_volume : Set the volume of the headphones if any
• headphone_mix : Set the proportion of the active desk you can hear in the headphone in addition to the working desk
• mic_volume : Set the volume of the microphone if it's enabled on your soundcard
• pitch : Set the pitch of the desk
• pitch_reset : Smoothly reset the pitch to 100%
• pitch_bend : Add a value to the pitch without changing the display and the pitch slider
• crossfader : Set the crossfader value
• level : Set the level value
• gain : Set the gain value
• bass : Set the bass equalizer value
• kill_bass : Remove all bass from the song
• bassfader : Crossfade only the bass
• medium : Set the medium equalizer value
• kill_medium : Remove all medium from the song
• mediumfader : Crossfade only the mediums
• high : Set the high equalizer value
• kill_high : Remove all high from the song
• highfader : Crossfade only the highs
• eq_reset : Reset bass, medium and high to 0db
• menu : Change to the "value"th menu page
• settings : Open the settings configuration pannel
• effect : Activate the "value"th effect
• sample : Play the "value"th sample
• loop : Enter or exit a loop of "value" beats length
• shift_loop : Shift the loop from "value" beats
• loop_in : Set the entry point of a manual loop, or change the entry point if relative
• loop_in : Set the exit point of a manual loop, or change the exit point if relative
• loop_length : Set the length of a manual loop
• set_cue : Save the actual position in the "value"th cue point
• goto_cue : Go to the "value"th cue point
• song_pos : Set the playing position to "value"
• scratch : Scratch the song from "value" samples (must be relative)
• hold : Hold the disc
• nudge : Nudge the song from "value" samples (same as scratch, but without beatlock effect)
• skip_beat : Skip "value" beats in the song
• zoom : Zoom the rhythm window
• seek : Quickly move into the song
• edit_bpm : Open the "fix rhythm" window
• adjust_cbg : Manually adjust the CBG (obsolete, use edit_bpm instead)
• adjust_cbg4 : Manually adjust the 4/4 pattern of the CBG (obsolete, use edit_bpm instead)
• goto_mixpoint : Go to an automix point (obsolete, use edit_bpm instead)
• set_mixpoint : Set an automix point (obsolete, use edit_bpm instead)
• edit_comment : Open the "edit comment" window
• pannel : switch the pannel "value" and all its sub-components
• show_pannel : show the pannel "value" and all its sub-components
• hide_pannel : hide the pannel "value" and all its sub-components
• reset_xp10 : recalibrate the touch-sensitive device of the xp10
• lock_pannel : Lock or unlock a sidepannel in the browser (directories or playlist)
• favorite_folder : Set the current folder as favorite folder
• scan_hd : Scan the hard drive for audio files
• scan_cd : Scan a CD and add it in the search database
• delete_cd : Delete a CD from the search database
• automix : Enable or Disable the automatic playlist mixing
• randomize : Randomize the playlist
• onlynew : Remove all already-played songs from the playlist
• repeat_playlist : Enable or Disable the repeat mode of the playlist
• load_playlist : Load a playlist
• save_playlist : Save a playlist
• search : Go to the search page, and set the focus to the search box
• record : Start or stop the recording
• record_cut : Cut the recording to the next file or track
• load_effect : Load an effect
• load_sample : Load a sample

The Values

Here is the list of the valid value:

• "reset" : Bring a value back to its default
• "auto" : Set the matching value (for example, action="pitch" value="auto" set the pitch to match the other desk's BPM)
• "cut" : Like value="0"
• "boost" : Like value="4096"
• +xx : Increment the value by xx
• -xx : Decrement the value by xx
• xx : Set the value to xx. If the value is for a slider action, it ranges from 0 (min) to 4096 (max)
  
  
• "temporary" : Do this action only while the button or key is pressed, and reverse to the old value after

The <button> element

The syntax of the button element is <button action="" chan="" value="" rightclick="" dblclick="" leftclick="" pannel="">.

• action is an action
• chan can take its value between "1", "2", "default" (default), or "active".
  
• value specify a value that is action dependent
• rightclick can specify a different value if the button is clicked with the right mouse button
• leftclick can specify a different value if the button is clicked with the left mouse button
• dblclick can specify a different value if the button is double-clicked
• pannel can put the button into a specific pannel

Then, as child elements of the <button> element, you find its definitions.
The available definitions of a button are:

• <size width="" height=""> : Give the width and height of the button
• <pos x="" y=""> : Give the position of the button on the screen
• <up x="" y=""> : Give the coordinate of the graphic to use when the button is normal
• <down x="" y=""> : Give the coordinate of the graphic to use when the button is pushed
• <selected x="" y=""> : Give the coordinate of the graphic to use when the button is selected
• <over x="" y=""> : Give the coordinate of the graphic to use when the mouse is over the button
• <overselected x="" y=""> : Give the coordinate of the graphic to use when the mouse is over the button and the button is selected
• <downselected x="" y=""> : Give the coordinate of the graphic to use when the button is pushed and selected
• <clipmask x="" y=""> : Give the coordinate of the B&W graphic that should be used as a clip mask when drawing the button
• <mousemask x="" y=""> : Give the coordinate of the B&W graphic that should be used as a mask to decide if the mouse is over the button
• <mouserect x="" y="" width="" height=""> : Set a simple rect zone as a mouse mask
• <mousecircle x="" y="" r=""> : Set a simple circle zone as a mouse mask

The <slider> element

The syntax of the slider element is <slider action="" chan="" value="" dblclick="" rightclick="" leftclick="" pannel="" orientation="" direction="" relative="">.
The properties values are:

• action is an action
• chan can take its value between "1", "2", "default" (default), or "active".
• value specify a value that is action dependent (usually you won't define a numeric value since the slider's position will define it, but you can use the "temporary" value for example)
• rightclick can specify a different value if the slider is clicked with the right mouse button
• leftclick can specify a different value if the slider is clicked with the left mouse button
• dblclick can specify a different value if the slider is double-clicked
• pannel can put the slider into a specific pannel
  
• orientation : Possible values:
  • horizontal, for a simple horizontal slider
  • vertical, for a simple vertical slider
  • circle, for a circular slider
  • round, for a knob-like button
• direction (horizontal and vertical sliders only) : possible values: "up" (default) or "down"
• relative : if set to "yes", the slider will move its associated value relatively

• <size width="" height=""> : Give the width and height of the slider
• <pos x="" y=""> : Give the position of the slider on the screen
• <up x="" y=""> : Give the coordinate of the graphic to use when the slider is normal
• <selected x="" y=""> : Give the coordinate of the graphic to use when the slider is selected
• <clipmask x="" y=""> : Give the coordinate of the B&W graphic that should be used as a clip mask when drawing the slider
• <mousemask x="" y=""> : Give the coordinate of the B&W graphic that should be used as a mask to decide if the mouse is over the slider
• <mouserect x="" y="" width="" height=""> : Set a simple rect zone as a mouse mask
• <mousecircle x="" y="" r=""> : Set a simple circle zone as a mouse mask
• <fader> (horizontal and vertical sliders only) : The definition is the same as a <button> element without an action, and it will act as a fader for the slider
• <circle x="" y="" anglemin="" anglemax="" sectsize="" direction=""> (circle sliders only) : define the circular slider geometry with these properties:
  • x : center of the circle
  • y : center of the circle
  • anglemin : angle (in degree) for the zero position of the slider
  • anglemax : angle (in degree) for the maximum position of the slider
  • sectsize : if not zero (default value), the slider will have a "fader" of sectsize width
  • direction : possible values: "cw" (default) or "ccw"
• <fader move="" sensibility=""> (round sliders only) : The move possible values are "full", "horz", "vert", "v" or "circ".
  The <fader> element may contains these definitions:
  • <pos x="" y="" nb="" nbx="">> : give the coordinate of the graphics to use for the slider (depending on the slider value). If nbx is specified, the graphic is split on several rows
  • <over x="" y="" nb="" nbx="">> : give the coordinate of the graphics to use when the mouse is over the slider
    

The <browser> element

The browser element sets the space that will be used to draw the windows (search, files, ...).
You can only have one browser element in a given skin file, but you do have to define one.

The syntax of the browser element is <browser>.

The browser definitions are:

• <size width="" height=""> : Give the width and height of the browser window
• <pos x="" y=""> : Give the position of the browser window on the screen
• <text font="" size="" weight="" color="" over="" selected=""> : Give the main text's font, size and colors
• <options font="" size="" weight="" color="" over="" selected=""> : Give the options text's font, size and colors
• <widgets font="" size="" weight="" color="" facecolor="" lightcolor="" shadowcolor="" highlightcolor="" darkshadowcolor="" stripescolor="" trackcolor1="" trackcolor2=""> : Give the colors and font for the widgets (scrollbars, ...)
• <colormatrix rr="" rg="" rb="" gr="" gg="" gb="" br="" bg="" bb=""> : Set a color transformation matrix that will be applied on the built-in graphics

The <rhythm> element

The rhythm element defines where and how the rhythm curves will be displayed.

The syntax of the rhythm element is <rhythm>.

The rhythm definitions are:

• <size width="" height=""> : Give the width and height of the rhythm window
• <pos x="" y=""> : Give the position of the rhythm window on the screen
• <up x="" y=""> : give the background graphic to be used
• <chan1 x="" y=""> : give the graphic to be used when drawing the curve for the first desk
• <chan2 x="" y=""> : give the graphic to be used when drawing the curve for the second desk
• <both x="" y=""> : give the graphic to be used when drawing a point that belong to both curves
• <color back="" chan1="" chan2="" both=""> : (optional) Give simple colors to the curves. The colors must be a key in the standard VGA palette. This can be faster on slower systems than to use the chan1, chan2 and both definitions (see below)
• <grid1 width="" mainwidth=""> : Set up the CBG (computed beat grid) for the default channel. The <grid1> element has these sub-elements :
  • <size width="" height=""> : Give the width and height of the CBG window
  • <pos x="" y=""> : Give the position of the CBG window on the screen
  • <up x="" y=""> : give the background graphic to be used
  • <down x="" y=""> : give the CBG graphic to be used
• <grid2 width="" mainwidth=""> : Same as <grid1>, but for the active channel

The <songpos> element

The songpos is a special slider that is used to display and set the song position, display the song's structure, display and set the first five cue points.

It has all the properties and definitions of a <slider>, plus those:

• <down x="" y=""> : Give the graphic to use for portions of the song not played yet, and without any volume
• <volume x="" y=""> : Give the graphic to use for portions of the song not played yet, and with a maximum volume (the display will be a fade between down and volume)
• <selected x="" y=""> : Give the graphic to use for portions of the song already played, and without any volume
• <volumeselected x="" y=""> : Give the graphic to use for portions of the song already played, and with a maximum volume (the display will be a fade between selected and volumeselected)
• <cues> : Define the sprites to be used as CUE markers. Includes the following definitions :
  • <size width="" height=""> : Give the width and height of the cue sprite
  • <up x="" y=""> : give the cue sprite graphic
  • <down x="" y=""> : give the graphic to be used when the cue is pushed
  • <over x="" y=""> : give the graphic to be used when the mouse is over the cue
  • <clipmask x="" y=""> : Give the coordinate of the B&W graphic that should be used as a clip mask when drawing the cue
    

The <scratch> element

A scratch zone defines a zone where the user can scratch using the mouse.

The syntax of the scratch element is <scratch chan="" factor="">.
The properties values are:

• chan can take its value between "1", "2", "default" (default), or "active".
• factor : (optional) multiply the mouse movement by factor/4096

• <size width="" height=""> : Give the width and height of the scratch zone
• <pos x="" y=""> : Give the position of the scratch zone on the screen
• <mousemask x="" y=""> : Give the coordinate of the B&W graphic that should be used as a mask to decide if the mouse is over the scratch zone
• <mouserect x="" y="" width="" height=""> : Set a simple rect zone as a mouse mask
• <mousecircle x="" y="" r=""> : Set a simple circle zone as a mouse mask
• <center x="" y=""> : Give the center of the circular mouse movement

The <textzone> element

The syntax of the textzone element is <textzone chan="" resetcounter="" pannel="">.
The properties values are:

• chan can take its value between "1", "2", "default" (default), or "active".
• resetcounter : if set to "true", the counter will be reset if this textzone is clicked
• pannel can put the textzone into a specific pannel

• <size width="" height=""> : Give the width and height of the textzone
• <pos x="" y=""> : Give the position of the textzone on the screen
• <mousemask x="" y=""> : Give the coordinate of the B&W graphic that should be used as a mask to decide if the mouse is over the textzone
• <mouserect x="" y="" width="" height=""> : Set a simple rect zone as a mouse mask
• <mousecircle x="" y="" r=""> : Set a simple circle zone as a mouse mask
• <text font="" weight="" size="" color="" align="" format=""> : Specify the text to be displayed with these properties:
  • font : select the font to be used (default: arial)
  • weight : possible values: "normal" (default) or "bold"
  • size : give the font size (default: 12)
  • color : give the font color (default: white). The color can be written in numerical format (#0000FF) or with the color name ("blue")
  • align : possible values: "left", "right", "center" (or "middle")
  • format : this string defines what will be written (see the exact format below)
  • scroll : if set to "yes", the text will scroll if it can't fit in the box
• <text2 font="" weight="" size="" color="" align="" format=""> : Specify an alternate text to be displayed if the user click on the textzone.
• <text3>, <text4>, <text5> : Same as text2 (the display will cycle through the defined text each time the user click the textzone).

• \\ : print a single \ character
• \n : print a line feed
• \r : print a carriage return
• \t : print a tab character
• \xx : print the ascii character xx
• %% : print a single % character
• %yy : goto to the yy line
• %xx,yy : goto to the xx,yy position
• %title : print the song's title
• %author : print the song's author
• %fullhour : display the time in a hh:mm:ss format
• %hour : display the time in a hh:mm format
• %counter : display a counter
• %pitch : print the pitch value
• %time : print the length of the song (can use modifiers - see below)
• %spent : print the spent time of the song (can use modifiers)
• %left : print the left time of the song (can use modifiers)
• %cueX : print the time position of the Xth cue point (can use modifiers)
• %tocueX : print the time to the Xth cue point (can use modifiers)
• %fromcueX : print the time elapsed from the Xth cue point (can use modifiers)
• %start : print the time position of the first beat (can use modifiers)
• %end : print the time position of the last beat (can use modifiers)
• %tostart : print the time to the first beat (can use modifiers)
• %toend : print the time to the last beat (can use modifiers)
• %fromstart : print the time elapsed from the first beat (can use modifiers)
• %fromend : print the time elapsed from the last beat (can use modifiers)
• %bpm : print the bpm of the song (can use modifiers)
• %level : print the song's level in dB (can use modifiers)
• %comment : print the song's comment if any

• P : modify the value to reflect the pitch change
• L : use the local value instead of the global value (only used by %level)
• B : display the value as a number of beat instead of a time
  

The <visual> element

A visual is a zone that changes its display to reflect various things.

The syntax of the visual element is <visual source="" factor="" type="" chan="" pannel="" orientation="" direction="">.
The properties values are:

• source : possible values:
  • "beat" : The beat intensity
  • "rotation" : The angle of the disc (depends on the position and the RPM speed)
  • "arm" : The position of the turntable's arm (moves on PLAY and PAUSE)
  • "volume" : The volume (depends on the crossfader and the level values)
  • "position" : The position in the song
• factor : Optional factor to multiply (if positive) or divide (if negative) the source's value by
• type : possible values:
  • "onoff" : Display the up graphic if source>=2048, or the down graphic if source<2048
  • "transparent" : Fade smoothly between up and down graphics
  • "linear" : Display a portion from the down graphic then a portion from the up graphic
  • "custom" : Display a specific graphic depending on the source value
• chan : possible values: "1", "2", "default", "active" or "both" (default)
• pannel can put the visual into a specific pannel
• orientation : (defined for type="linear" only) possible values: "horizontal" or "vertical"
• direction : (defined for type="linear" only) possible values: "left", "right", "up" or "down"

• <size width="" height=""> : Give the width and height of the visual
• <pos x="" y=""> : Give the position of the visual on the screen
• <clipmask x="" y=""> : Give the coordinate of the B&W graphic that should be used as a clip mask when drawing the visual
• <up x="" y=""> : (all types except "custom") Give the coordinate of the graphic to use when the visual is low
• <down x="" y=""> : (all types except "custom") Give the coordinate of the graphic to use when the visual is high
• <up x="" y="" nb="" nbx=""> : (type="custom" only) Give the coordinate of the graphics to use with the custom type (works like for a "round" slider)
  

The <dropzone> element

A dropzone is a zone where a file could be dragged over in order to load it.

The syntax of the dropzone element is <dropzone chan="" pannel="">.
The properties values are:

• chan : possible values: "1", "2", "active" (default) or "playlist"
• pannel can put the dropzone into a specific pannel

• <size width="" height=""> : Give the width and height of the dropzone
• <pos x="" y=""> : Give the position of the dropzone on the screen
• <mousemask x="" y=""> : Give the coordinate of the B&W graphic that should be used as a mask to decide if the mouse is over the dropzone
• <mouserect x="" y="" width="" height=""> : Set a simple rect zone as a mouse mask
• <mousecircle x="" y="" r=""> : Set a simple circle zone as a mouse mask
  

The <grabzone> element

A grabzone define a zone that can be used to move the VirtualDJ's window if it is not maximized.
If no grabzone is defined, any zone that is not a defined element act as a grabzone.

The syntax of the grabzone element is <grabzone>.
The grabzone definitions are:

• <size width="" height=""> : Give the width and height of the grabzone
• <pos x="" y=""> : Give the position of the grabzone on the screen
• <mousemask x="" y=""> : Give the coordinate of the B&W graphic that should be used as a mask to decide if the mouse is over the grabzone
• <mouserect x="" y="" width="" height=""> : Set a simple rect zone as a mouse mask
• <mousecircle x="" y="" r=""> : Set a simple circle zone as a mouse mask

The <pannel> element

A pannel is a zone that group together several other elements, in order to hide or show all of them at once.
Pannels are very usefull if you want to put several groups of elements on the same place, and switch from one group to another with a button or a shortcut.

The syntax of the pannel element is <pannel visible="" id="" group="">.
The properties values are:

• visible : "yes" to have it shown at the begining (when the skin is loaded), or "no" to have it hidded
• id : every element which has a pannel="" equal to this id will belong to this pannel
• group : only one pannel from a common group can be shown at a time (that means that when you show a pannel belonging to a group, all the other pannels from that group will be hidded)

• <size width="" height=""> : Give the width and height of the pannel
• <pos x="" y=""> : Give the position of the pannel on the screen
• <down x="" y=""> : Give the coordinate of the graphic to use when the pannel is displayed
• <up x="" y=""> : Give the coordinate of the graphic to use to erase the pannel when it is hidded
• <clipmask x="" y=""> : Give the coordinate of the B&W graphic that should be used as a clip mask when drawing the pannel